<template>
  <div class="wraper-content row justify-content-md-center" >
        <div class="col col-2">
          <div class="content">
            <h1 class="show-for-medium-up" style="font-size: 18px;">Our Journals</h1>
            <ul id="index-journals" class="hidden">
              <li>
                  <a href="/journal/sustainability"><img src="http://www.mdpi.com/img/journals/sustainability-logo.png" alt="" border="0" height="50" class="img-fixed">
                      <span class="impact-factor">
                      </span>
                  </a>
              </li>
              <li>
                  <a href="/journal/sensors"><img src="http://www.mdpi.com/img/journals/sensors-logo.png" alt="" border="0" height="50" class="img-fixed">
                    <span class="impact-factor">
                      </span>
                  </a>
              </li>
              <li>
                  <a href="/journal/sensors"><img src="http://www.mdpi.com/img/journals/energies-logo.png" alt="" border="0" height="50" class="img-fixed">
                    <span class="impact-factor">
                      </span>
                  </a>
              </li>
            </ul>
            <div class="news-content">
              <h1 class="title show-for-medium-up">
                Announcements
              </h1>
              <div class="generic-item news-item ">
                  <span class="text-information">4 June 2018</span>
                    <br>
                        <a class="title-link" href="#">
                        <strong>Public Statement from the TTOA Consortium</strong>
                  </a>
              </div>
              <div class="generic-item news-item ">
                  <span class="text-information">4 June 2018</span>
                    <br>
                        <a class="title-link" href="#">
                        <strong>World Electric Vehicle Association (WEVA) Collaborates with MDPI in Publishing the World Electric Vehicle Journal</strong>
                  </a>
              </div>
              <div class="generic-item news-item ">
                  <span class="text-information">31 May 2018</span>
                    <br>
                        <a class="title-link" href="#">
                        <strong>2017 CiteScore™ Metrics Released</strong>
                  </a>
              </div>
              <div class="generic-item news-item more-link">
                  <span class="text-information">>> more news &amp; announcements</span>

              </div>
            </div>
            <div class="latest-content">
              <h1 class="title show-for-medium-up">
                Latest Journal
              </h1>

            </div>
          </div>
        </div>
        <div class="col col-7 middle-bordered">
          <div class="content " >
            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" style="padding:1em">
              <ol class="carousel-indicators">
                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
              </ol>
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <!-- <div style="position:absolute">test</div> -->
                  <img class="d-block w-100" src="http://www.mdpi.com/title_story/title_story_15272343147074.jpg" alt="First slide">
                </div>
                <div class="carousel-item">
                  <img class="d-block w-100" src="http://www.mdpi.com/title_story/title_story_15277337920797.jpg" alt="Second slide">
                </div>
                <div class="carousel-item">

                  <img class="d-block w-100" src="http://www.mdpi.com/title_story/title_story_15257425540435.jpg" alt="Third slide">
                </div>
              </div>
              <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
              </a>
              <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>
            </div>
            <h1 class="art-title">Latest Articles</h1>
            <div class="generic-item article-item">
              <div class="article-icons">
                <span class="label openaccess">Open Access</span>
                <span class="label articletype">Review</span>
              </div>
              <div class="title-section">
                <a href="#" class="artical-title">Quantitative Scanning Laue Diffraction Microscopy: Application to the Study of 3D Printed Nickel-Based Superalloys</a>
              </div>
              <div class="artical-author">by
                <a href="#" class="author-link"><span class="author">Guangni Zhou</span></a>
                <a href="#" class="author-link"><span class="author">Yaodi</span></a>
                <a href="#" class="author-link"><span class="author">Li Ying</span></a>
              </div>
              <div class="summary-content">
                <div class="abstract-full inline">
                  Progress in computing speed and algorithm efficiency together with advances in area detector and X-ray optics technologies have transformed the technique of synchrotron radiation-based scanning Laue X-ray microdiffraction. It has now evolved into a near real-time quantitative imaging tool for material structure and deformation at the micrometer and nanometer scales. We will review the achievements of this technique at the Advanced Light Source (Berkeley, CA, USA), and demonstrate its application in the thorough microstructural investigations of laser-assisted 3D printed nickel-based superalloys.
                <a href="">Full article</a></div>
              </div>
            </div>
            <div class="generic-item article-item">
              <div class="article-icons">
                <span class="label openaccess">Open Access</span>
                <span class="label articletype">Review</span>
              </div>
              <div class="title-section">
                <a href="#" class="artical-title">Quantitative Scanning Laue Diffraction Microscopy: Application to the Study of 3D Printed Nickel-Based Superalloys</a>
              </div>
              <div class="artical-author">by
                <a href="#" class="author-link"><span class="author">Guangni Zhou</span></a>
                <a href="#" class="author-link"><span class="author">Yaodi</span></a>
                <a href="#" class="author-link"><span class="author">Li Ying</span></a>
              </div>
              <div class="summary-content">
                <div class="abstract-full inline">
                  Progress in computing speed and algorithm efficiency together with advances in area detector and X-ray optics technologies have transformed the technique of synchrotron radiation-based scanning Laue X-ray microdiffraction. It has now evolved into a near real-time quantitative imaging tool for material structure and deformation at the micrometer and nanometer scales. We will review the achievements of this technique at the Advanced Light Source (Berkeley, CA, USA), and demonstrate its application in the thorough microstructural investigations of laser-assisted 3D printed nickel-based superalloys.
                <a href="">Full article</a></div>
              </div>
            </div>
            <div class="generic-item article-item">
              <div class="article-icons">
                <span class="label openaccess">Open Access</span>
                <span class="label articletype">Review</span>
              </div>
              <div class="title-section">
                <a href="#" class="artical-title">Quantitative Scanning Laue Diffraction Microscopy: Application to the Study of 3D Printed Nickel-Based Superalloys</a>
              </div>
              <div class="artical-author">by
                <a href="#" class="author-link"><span class="author">Guangni Zhou</span></a>
                <a href="#" class="author-link"><span class="author">Yaodi</span></a>
                <a href="#" class="author-link"><span class="author">Li Ying</span></a>
              </div>
              <div class="summary-content">
                <div class="abstract-full inline">
                  Progress in computing speed and algorithm efficiency together with advances in area detector and X-ray optics technologies have transformed the technique of synchrotron radiation-based scanning Laue X-ray microdiffraction. It has now evolved into a near real-time quantitative imaging tool for material structure and deformation at the micrometer and nanometer scales. We will review the achievements of this technique at the Advanced Light Source (Berkeley, CA, USA), and demonstrate its application in the thorough microstructural investigations of laser-assisted 3D printed nickel-based superalloys.
                <a href="">Full article</a></div>
              </div>
            </div>
          </div>
        </div>
        <div class="col col-3">
          <div class="content">
            <h1 class="title show-for-medium-up">
              Login Your Account
            </h1>
            <form class="form-inline ml-3">
              <div class="input-group form-group row mb-2 mt-2 " style="width:100%">
                <!-- <label for="account" class="col-sm-3 col-form-label mr-sm-2 col-form-label-sm">Account</label> -->

                  <input type="text" class="form-control form-control-sm" id="account" value="" placeholder="Enter Your Account">
                  <div class="input-group-append">
                      <button class="btn btn-outline-secondary btn-outline-dark btn-sm" type="button">Login</button>
                  </div>
              </div>
              <div class="input-group form-group row mb-2"  style="width:100%">
                <!-- <label for="pass" class="col-sm-3 col-form-label mr-sm-2 col-form-label-sm">Password</label> -->

                  <input type="password" class="form-control form-control-sm" id="pass" placeholder="Enter Your Password">
                  <div class="input-group-append">
                      <button class="btn btn-outline-secondary btn-outline-dark btn-sm" type="button">Reset</button>
                  </div>
              </div>

            </form>

             <h1 class="title show-for-medium-up">
              Follow Us
            </h1>
            <div id="adCarousel" class="carousel slide" data-ride="carousel" style="padding:1em" interval=1500>
              <ol class="carousel-indicators">
                <li data-target="#adCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#adCarousel" data-slide-to="1"></li>
                <li data-target="#adCarousel" data-slide-to="2"></li>
              </ol>
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <!-- <div style="position:absolute">test</div> -->
                  <img class="d-block w-100" src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1528453970&di=835c669aeed4bc3b477e598c0f3ba576&src=http://img4.duitang.com/uploads/item/201504/10/20150410H1423_sUaTd.jpeg" alt="First slide">
                </div>
                <div class="carousel-item">
                  <img class="d-block w-100" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1528464054487&di=a7b0be6f4e08c052eb8f6a3657dc30a8&imgtype=0&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201510%2F25%2F20151025233833_CiuL3.thumb.700_0.jpeg" alt="Second slide">
                </div>
                <div class="carousel-item">

                  <img class="d-block w-100" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1528464072111&di=5efd969673c6a73d65c6ca6dfe1e519e&imgtype=jpg&src=http%3A%2F%2Fimg1.imgtn.bdimg.com%2Fit%2Fu%3D3206083891%2C4134437313%26fm%3D214%26gp%3D0.jpg" alt="Third slide">
                </div>
              </div>

            </div>

            <!-- 结束轮播 -->
            <div class="news-content">
              <h1 class="title show-for-medium-up">
                Announcements
              </h1>
              <div class="generic-item news-item ">
                  <span class="text-information">4 June 2018</span>
                    <br>
                        <a class="title-link" href="#">
                        <strong>Public Statement from the TTOA Consortium</strong>
                  </a>
              </div>
              <div class="generic-item news-item ">
                  <span class="text-information">4 June 2018</span>
                    <br>
                        <a class="title-link" href="#">
                        <strong>World Electric Vehicle Association (WEVA) Collaborates with MDPI in Publishing the World Electric Vehicle Journal</strong>
                  </a>
              </div>
              <div class="generic-item news-item ">
                  <span class="text-information">31 May 2018</span>
                    <br>
                        <a class="title-link" href="#">
                        <strong>2017 CiteScore™ Metrics Released</strong>
                  </a>
              </div>
              <div class="generic-item news-item more-link">
                  <span class="text-information">>> more news &amp; announcements</span>

              </div>
            </div>
          </div>
        </div>
  </div>
</template>
<script>

export default {

}
</script>

<style lang="stylus" scoped>
.summary-content{
  font-size: 14px;
  line-height: 19px;
  cursor: auto;
  font-style: normal;
  font-weight: 400
}
.author-link{
  color #a71a1a
}
.title-section{
  margin 8px 0
}
.title-section .artical-title{

  font-family: Helvetica,Arial;
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  color #333333
}
.title-section a:hover{
  color #4f5671
}
.label {
    padding: 3px 6px;
    color white;
}
.label.openaccess {
    background-color: #4f5671;
}
.label.articletype, .label.review {
    background-color: #9F1326;
}
@media (min-width: 768px){
  .container {
        max-width: 100%;
  }
}
@media only screen and (min-width: 50.063em){
  ul#index-journals img {
      height: 35px;
  }
  .title{
    font-size 12px
  }
}
.art-title{
  margin-left 30px
}
h1{
  font-family: Arial;
  font-size: 20px;
  font-weight: 400;
  color: #4f5671;
  margin-bottom: 0;
  margin-top: 0;
  padding: 5px 0;
}
.wraper-content{
  box-sizing border-box!important;
  margin-top 15px;
  padding 3px 15px
}
.wraper-content .middle-bordered{

  border-top: none!important
  border-left  1px solid #ededed;
  border-right  1px solid #ededed;
}
.wraper-content .col .content{
  border-top solid 2px #343a40;
}
.show-for-medium-up{
  padding-top 12px
  padding-left 15px
  margin-bottom 0
  font-size 18px;
  color rgb(79, 86, 113);
  font-weight 400
  font-family Arial

}
.title{
  color white
  background-color #4f5671
  vertical-align middle;
  text-align center
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  color: #fff;
  padding: 5px 15px;
  margin-top: 10px;
  position: relative;
  margin-bottom: -1px;
}
.generic-item {

    font-size: 12px;
    line-height: 19px;
    border-top: 1px solid #ededed;
    overflow: hidden;
    padding: 10px 15px;
}
.content .generic-item.article-item {
    padding: 15px;
    background-color: #f8f8f8;
    margin-bottom: 10px;
    -webkit-box-shadow: 1px 1px 3px 0 rgba(204,204,204,.75);
    -moz-box-shadow: 1px 1px 3px 0 rgba(204,204,204,.75);
    box-shadow: 1px 1px 3px 0 rgba(204,204,204,.75);
    margin-right: 15px;
    margin-left: 15px;
}
.news-item{
  border-top-color:rgb(237, 237, 237)

}
.news-item a {
  color black
}
.news-item a:hover{
  color #4f5671
}
.news-content .more-link{
  color:#a71a1a!important
}
#index-journals{
  list-style:none
  padding 0 15px
  margin 12px 0!important
}
#index-journals li {
  // margin-bottom 5px
}
ul#index-journals li img {
    max-height: 60px;
    padding: 4px;
}
</style>


